import { Layout, Tooltip } from 'antd'
import { useState } from 'react'
import menuConfig from './config/menuConfig'
import 'antd/dist/reset.css'
const { Sider, Content } = Layout

function App() {
  const [activeKey, setActiveKey] = useState(
    menuConfig.find((item) => item.position === 'top')?.key || menuConfig[0].key
  );
  const ActivePage = menuConfig.find((item) => item.key === activeKey)?.Content

  // 拆分顶部和底部菜单
  const topMenus = menuConfig.filter((item) => item.position === 'top')
  const bottomMenus = menuConfig.filter((item) => item.position === 'bottom')

  return (
    <Layout style={{ height: '100vh', width: '100vw' }}>
      <Sider width={60} style={{ background: '#1e1e1e' }}>
        <div
          style={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '10px 0',
          }}
        >
          {/* 顶部菜单 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            {topMenus.map((item) => (
              <Tooltip key={item.key} title={item.label} placement="right">
                <div
                  onClick={() => setActiveKey(item.key)}
                  style={{
                    color: activeKey === item.key ? '#1677ff' : '#ccc',
                    fontSize: 22,
                    cursor: 'pointer',
                    display: 'flex',
                    padding: '2px',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  {item.icon}
                </div>
              </Tooltip>
            ))}
          </div>

          {/* 底部菜单 */}
          <div
            style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '10px' }}
          >
            {bottomMenus.map((item) => (
              <Tooltip key={item.key} title={item.label} placement="right">
                <div
                  onClick={() => setActiveKey(item.key)}
                  style={{
                    color: activeKey === item.key ? '#1677ff' : '#ccc',
                    fontSize: 22,
                    cursor: 'pointer',
                    display: 'flex',
                    padding: '2px',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  {item.icon}
                </div>
              </Tooltip>
            ))}
          </div>
        </div>
      </Sider>

      {/* 主内容区域 */}
      <Content
        style={{
          padding: '16px',
          background: '#fff',
          overflow: 'auto',
        }}
      >
        {ActivePage && <ActivePage />}
      </Content>
    </Layout>
  )
}

export default App
